<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>HyperMD Playground</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>
    <link rel=stylesheet href="./node_modules/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="./node_modules/codemirror/addon/fold/foldgutter.css" />
    <link rel=stylesheet href="./hypermd/mode/hypermd.css">
    <link rel=stylesheet href="./hypermd/theme/hypermd-light.css">

    <style style="display: none">
.CodeMirror, #test-box, #header{
    /*border:1px solid #999;*/
    /*border-radius: 2px;*/
    max-width: 800px;
    margin: auto;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', STHeiti, 'Microsoft Jhenghei', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	-webkit-font-smoothing: antialiased;
}
a { 
    color: #4078c0; 
    text-decoration: none;
}
a:hover {
    text-decoration: underline
}
h1,h2,h3,b{ font-weight: 600 }
h2 { font-size: 1.4em; }

#test-box ul {
    list-style: circle;
}
    </style>

<div id="header">
    <h1>HyperMD</h1>
    <p><b>Breaks the Wall</b> between <i>writing</i> and <i>preview</i>, in a Markdown Editor.</p>
    <p>A Markdown editor provided by <a href="https://laobubu.net">laobubu</a></p>
    <p><a href="https://github.com/laobubu/hypermd/">[View on GitHub]</a></p>
</div>

<textarea id="demo"></textarea>

<script src="./node_modules/marked/marked.min.js"></script>  <!-- for addon/hover and other -->
<script src="./node_modules/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>   <!-- for addon/fold-math -->

<!-- using require.js to solve the dependencies -->
<script src="./demo/vendor/require.js"></script>
<script src="./demo/index.js"></script>

<!-- some useless test stuff -->
<div id="test-box">
    <hr>
    <h2>Interactive Demo</h2>
    <ul>
        <li><button id="raw_mode">Raw Mode</button> use default theme provided by CodeMirror, stop folding/hiding things.</li>
        <li><button id="hypermd_mode">HyperMD Mode</button> revert changes made by the above button</li>
    </ul>
</div>
<script src="./demo/index2.js"></script>
</body>

</html>
